<template>
  <div class="svg-wrapper">
    <svg
      width="400"
      height="300"
      :viewBox="`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`"
    >
      <!-- 网格背景，便于观察平移效果 -->
      <defs>
        <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
          <path
            d="M 20 0 L 0 0 0 20"
            fill="none"
            stroke="#e0e0e0"
            stroke-width="1"
          />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#grid)" />

      <!-- 参考坐标轴 -->
      <line
        x1="0"
        :y1="viewBox.height / 2 - viewBox.y"
        x2="400"
        :y2="viewBox.height / 2 - viewBox.y"
        stroke="#ccc"
        stroke-width="1"
        stroke-dasharray="5,5"
      />
      <line
        :x1="viewBox.width / 2 - viewBox.x"
        y1="0"
        :x2="viewBox.width / 2 - viewBox.x"
        y2="300"
        stroke="#ccc"
        stroke-width="1"
        stroke-dasharray="5,5"
      />

      <!-- 示例图形 -->
      <circle cx="100" cy="100" r="50" fill="blue" />
      <rect x="200" cy="150" width="60" height="40" fill="red" />

      <!-- 显示当前视口位置 -->
      <text x="10" y="20" font-size="12" fill="#666">
        ViewBox: ({{ viewBox.x }}, {{ viewBox.y }})
      </text>
    </svg>
    <div class="actions">
      <button @click="toLeft">向左移动</button>
      <button @click="toRight">向右移动</button>
      <button @click="toUp">向上移动</button>
      <button @click="toDown">向下移动</button>
      <button @click="resetView">重置视图</button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      viewBox: {
        x: 0,
        y: 0,
        width: 400,
        height: 300
      },
      // 平移步长
      panStep: 50
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 向左移动
    toLeft() {
      this.viewBox.x -= this.panStep
      console.log('向左移动，当前视口位置:', this.viewBox.x, this.viewBox.y)
    },

    // 向右移动
    toRight() {
      this.viewBox.x += this.panStep
      console.log('向右移动，当前视口位置:', this.viewBox.x, this.viewBox.y)
    },

    // 向上移动
    toUp() {
      this.viewBox.y -= this.panStep
      console.log('向上移动，当前视口位置:', this.viewBox.x, this.viewBox.y)
    },

    // 向下移动
    toDown() {
      this.viewBox.y += this.panStep
      console.log('向下移动，当前视口位置:', this.viewBox.x, this.viewBox.y)
    },

    // 重置视图
    resetView() {
      this.viewBox.x = 0
      this.viewBox.y = 0
      console.log('重置视图')
    }
  },
  filters: {}
}
</script>

<style scoped lang="scss">
.svg-wrapper {
  height: 100%;
  position: relative;
  svg {
    border: 1px solid #ccc;
    background-color: #f9f9f9;
  }
  .actions {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;

    button {
      padding: 8px 16px;
      border: none;
      background-color: #409eff;
      color: #fff;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;

      &:hover {
        background-color: #66b1ff;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }

      // 重置按钮特殊样式
      &:last-child {
        background-color: #f56c6c;
        &:hover {
          background-color: #f78989;
        }
      }
    }
  }
}
</style>
